<template>
    <div>
        <h1>动画组</h1>
        <button @click="IsShow = !IsShow">显示/隐藏</button>
        <transition-group name="hoo3" appear>
            <h2 v-show="IsShow" key="1">你好啊</h2>
            <h2 v-show="!IsShow" key="2">不好啊</h2>
        </transition-group>

    </div>
</template>
<script>
export default {
    data() {
        return {
            IsShow:true
        }
    },
}
</script>
<style scoped>
    h2{
        background-color: yellow;   
        /* transition: all 2s; */
    }

    /* transition 标签一共提供4种过度 以及进场+离开 的动画效果  */
    .hoo3-enter,.hoo3-leave-to{
        transform: translateX(-100%);
    }

    /* 可以不使用这个 但是要在使用国度动画的元素上添加样式 transition: all 2s; 跟上面的h2类似  */
    .hoo3-enter-active,.hoo3-leave-active{
        transition: all 2s;
    }

    .hoo3-enter-to,.hoo3-leave{
        transform: translateX(0);
    }

    /* 优化代码 */
    /* .hoo-leave{
        transform: translateX(0);
    }

    .hoo-leave-to{
        transform: translateX(-100%);
    } */

    
</style>